<template>
	<div class="singer">
		<Scroll v-if="singers.length" :data="singers" class="scroll" :listenScroll="listenScroll" ref="scrollView">
			<ul ref="singerUl">
				<li class="li-box" v-for="(item, index) in singers" :key="index" ref="listView">
					<h2 class="title">{{item.title}}</h2>
					<ul>
						<li class="li-con" v-for="(itemc, index) in item.list" :key="index" @click="toSingerDetail(itemc)">
							<img :src="itemc.img" alt="">
							<span class="name">{{itemc.name}}</span>
						</li>
					</ul>
				</li>
			</ul>
		</Scroll>
		<!-- 右侧标签 -->
		<div class="tab-right">
			<ul>
				<li v-for="(item, index) in singers" :key="index" @touchstart.stop.prevent="toTouchScroll(index)">
					{{ item.title }}
				</li>
			</ul>
		</div>
		<!-- loading -->
		<div class="loading" v-show="singers.length===0 ? 1:0">
			<Loading />
		</div>
		<!-- 子路由（歌手详情页） -->
		<router-view></router-view>
	</div>
</template>

<script>
import Loading from 'base/loading/Loading'
import Scroll from 'base/scroll/Scroll'
import { getSingerList } from 'api/singer'
import { ERR_OK } from 'api/config'
import { mapMutations, mapGetters } from 'vuex'
import { playlistMixin } from 'assets/js/mixin'

export default {
	mixins: [playlistMixin],
	components: {
		Loading,
		Scroll
	},
	data() {
		return {
			singers: [],
			pulldown: true
		}
	},
	computed: {
		...mapGetters(["playlist"])
	},
	created() {
		this._getSingerList()
		this.listenScroll = true
	},
	methods: {
		handlePlaylist(playlist){
			if (this.$refs.singerUl) {
				const bottom = playlist.length>0 ? "60px":""
				this.$refs.singerUl.style.paddingBottom = bottom
        this.$refs.scrollView.refresh()
			}
		},
		_getSingerList: function() {
			var that = this
			getSingerList().then(res => {
				if (res.code === ERR_OK) {
					that.singers = res.data.list
					that._newData(res.data.list)
					// console.log(this.singers)
				}
			})
		},
		/* 改变封装原有数据 */
		_newData: function(dataList) {
			var newList = {}
			dataList.forEach(function(item, index){
				var isOn = 0
				for (let key in newList) {
					if (key === item.Findex) {
						isOn = 1
					}	
				}
				if (isOn === 1) {
					newList[item.Findex].list.push({
						id: item.Fsinger_id,
            mid: item.Fsinger_mid,
            name: item.Fsinger_name,
            img: `https://y.gtimg.cn/music/photo_new/T001R300x300M000${
              item.Fsinger_mid
            }.jpg?max_age=2592000`
					})
					isOn = 0;
				}else if(isOn === 0) {
					if (item.Findex === "9") {
            item.Findex = "其他"
          }
          newList[item.Findex] = {
            title: item.Findex,
            list: [{
							id: item.Fsinger_id,
							mid: item.Fsinger_mid,
							name: item.Fsinger_name,
							img: `https://y.gtimg.cn/music/photo_new/T001R300x300M000${
								item.Fsinger_mid
							}.jpg?max_age=2592000`
            }]
          }
				}
			})
			var newList2 = [];
      for (let key in newList) {
        newList2.push(newList[key])
      }
      function compare(property) {
        return function(a, b) {
          var value1 = a[property].charCodeAt()
          var value2 = b[property].charCodeAt()
          return value1 - value2
        };
      }
      newList2.sort(compare("title"))
      this.singers = newList2
		},
		toTouchScroll: function(index) {
      this.$refs.scrollView.scrollToElement(this.$refs.listView[index], 0)
    },
    toSingerDetail: function(item) {
      this.$router.push({
        path: `/singer/${item.id}`
      })
      this.setSinger(item)
    },
    ...mapMutations({
      setSinger: "SET_SINGER"
    })
	}
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
.scroll {
  position: relative;
  width: 100vw;
  height: 87vh;
  overflow: hidden;
}
.singer {
  position: relative;
}
.li-box {
  width: 100%;
  padding-bottom: rem(30);
}
.title {
  width: 100%;
  height: rem(30);
  padding-left: rem(20);
  box-sizing: border-box;
  color: hsla(0, 0%, 100%, 0.5);
  background: #333;
  font-size: rem(12);
  line-height: rem(30);
}
.li-con {
  width: 100%;
  height: rem(70);
  padding: rem(20) 0 0 rem(30);
  box-sizing: border-box;
}
img {
  width: rem(50);
  height: rem(50);
  line-height: rem(50);
  border-radius: rem(50);
  vertical-align: middle;
}
.name {
  display: inline-block;
  font-size: rem(14);
  margin-left: rem(20);
  color: hsla(0, 0%, 100%, 0.5);
  vertical-align: middle;
}
/* 侧面导航字母 */
.tab-right {
  position: absolute;
  z-index: 300;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: rem(20);
  padding: rem(20) 0;
  border-radius: rem(10);
  background: rgba(0, 0, 0, 0.3);
  font-family: Helvetica;
}
.tab-right li {
  padding-bottom: rem(6);
  line-height: 1;
  text-align: center;
  color: hsla(0, 0%, 100%, 0.5);
  font-size: rem(12);
}
#fixed {
  position: absolute;
  top: rem(-1);
  left: 0;
}
.loading {
  position: fixed;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
</style>